<template>
  <div class="shareList">
    <hm-nav-bar title="面经分享" path="/home/find"></hm-nav-bar>
    <div class="content">
      <!-- van-search搜索
        v-model双向绑定输入框的值
        show-action是否显示右边取消是一个布尔值,true显示,false不显示
        @search搜索事件
        @cancel取消事件
        placeholder占位符 -->
      <van-search
        class="search"
        placeholder="请输入搜索内容"
        v-model="inputValue"
        show-action
        @search="search"
        @cancel="cancelEvent"
      ></van-search>
      <!-- 利用v-if做静默刷新 -->
      <div v-if="showList">
        <van-list
          v-if="bol"
          v-model="loading"
          :finished="finish"
          finished-text="没有下一页了"
          @load="load"
        >
          <findShare
            v-for="(item, index) in list"
            :key="index"
            :shart="item"
          ></findShare>
        </van-list>
      </div>
      <div v-else>
        <h3 class="hot">大家都在搜</h3>
        <van-tag
          @click="hotSearch(item)"
          class="tag"
          color="#f7f4f5"
          text-color="#73748a"
          v-for="(item, index) in hotList"
          :key="index"
          >{{ item }}</van-tag
        >
        <van-cell class="mg38">
          <template #title>
            <div class="title">
              历史搜索
            </div>
          </template>
          <template #default>
            <div class="value" @click="clearEvent">
              清空
            </div>
          </template>
        </van-cell>
        <van-tag
          v-for="(item, index) in historyList"
          :key="index"
          class="tag"
          color="#f7f4f5"
          text-color="#73748a"
          >{{ item }}</van-tag
        >
      </div>
    </div>
  </div>
</template>
<script>
// 导入组件
import findShare from './findShare'
// 导入api
import { articlesShare, articlesShareTopSearch } from '@/api/find.js'
// 导入token
import { setToken, getToken, removeToken } from '@/utils/token.js'

export default {
  name: 'findList',

  components: {
    findShare
  },
  data () {
    return {
      inputValue: this.$route.query.q || '',
      list: [],
      //   刷新
      loading: false,
      finish: false,
      //   分页
      currPage: 1, // 当前页
      pageSize: 2, // 每页多少条
      //   静默刷新
      bol: true,
      //   取消显示
      showList: true,
      //   热门搜索
      hotList: [],
      //   数据保存在localStorage,一开始就获取数据,储存是字符串要JSON转为数组但是数据也有没有的情况
      historyList: JSON.parse(getToken('historyList')) || []
    }
  },
  methods: {
    search () {
      //   清空list,还原其他初始值
      this.list = []
      this.loading = false
      this.finish = false
      this.currPage = 1
      //   静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      this.showList = true
      //   要把搜索过的东西添加到历史里，不能为空,搜索过的出现在前面,去重, 数量上限是五个，
      if (this.inputValue.trim() !== '') {
        this.historyList.unshift(this.inputValue)
        this.historyList = [...new Set(this.historyList)]
        // 只要前五条
        this.historyList.splice(5)
        // 把数据保存在localStorage刷新也不会消失
        // localStorage只能储存字符串,所以把数组转字符串使用JSON
        setToken(JSON.stringify(this.historyList), 'historyList')
      }
      // 路由传参关键字
      this.$router.push('./shareList?q=' + this.inputValue)
    },
    async cancelEvent () {
      this.showList = false
      //   点击取消后发送热门搜索请求
      //  数组 里面没有数据的时候才获取数据
      if (!this.hotList.length) {
        const res = await articlesShareTopSearch()
        // console.log(res)
        this.hotList = res.data.data
      }
    },
    async load () {
      // 加了全局取消后可能会出错
      try {
        const res = await articlesShare({
          start: (this.currPage - 1) * this.pageSize, // 这个是固定写法
          limit: this.pageSize,
          q: this.inputValue
        })
        this.currPage++
        // 标题里有搜索的关键字要替换成红色
        // 1.搜索不能为空,trim去空格
        // 2.遍历数组forEach,item.title切割split 输入框的内容在拼接模板字符串给样式
        //   3.要以v-html的形式渲染
        if (this.inputValue.trim() !== '') {
          res.data.data.list.forEach(item => {
            item.title = item.title
              .split(this.inputValue)
              .join(`<span style="color:red">${this.inputValue}</span>`)
          })
        }

        //   console.log(res)
        // 数据要累加,下面的写法是赋值会一直加载下去
        // this.list = res.data.data.list
        // 用数组push方法累加
        this.list.push(...res.data.data.list)
        this.loading = false
        if (this.list.length >= res.data.data.total) {
          this.finish = true
        }
      } catch (err) {
        console.log(err)
      }
    },
    hotSearch (str) {
      this.inputValue = str
      this.search()
    },
    // 清空历史记录
    clearEvent () {
      console.log(123)
      // 数组变为空
      this.dialog({
        title: '警告',
        message: '是否清空所有的历史'
      })
        .then(() => {
          this.historyList = []
          removeToken('historyList')
        })
        .catch(() => {})
    }
  },
  activated () {
    // 第一次进入页面得到的是undefined,我们从头即0开始
    const _top = this.$route.meta.scrollTop || 0
    window.scrollTo(0, _top)
  }

  //   async created () {
  //     const res = await articlesShare()
  //     console.log(res)
  //     this.list = res.data.data.list
  //   },
}
</script>
<style lang="less" scoped>
.shareList {
  .content {
    padding: 0 @p15;
    background-color: #ffffff;
    .search {
      padding-left: 0;
      padding-right: 0;
    }
    .hot {
      margin-top: 21px;
    }
    .tag {
      margin-right: 5px;
      padding: 5px 8px;
      margin-top: 18px;
    }

    .mg38 {
      margin-top: 38px;
      .title {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
      }
      .value {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #545671;
        line-height: 16px;
        letter-spacing: 0px;
        padding-top: 5px;
      }
    }
    .van-cell {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>
